import React, { useState, useEffect } from 'react'
import { Avatar, Space, Layout, Menu, theme, Drawer, Button } from 'antd';
import NewRouter from "../components/sandbox/newRouter/NewRouter"
import {
  AlignCenterOutlined,
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
const { Header, Content, Sider } = Layout;
function NewsSandBox(props) {
  const [height, setHeight] = useState(0);
  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    setHeight(h);
  };
  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    setHeight(h)

    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  const [pathUrl, setPathUrl] = useState([props.location.pathname === "/" ? "/parts" : props.location.pathname])
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem('购进零件', '/parts', <AlignCenterOutlined />),
    getItem('产品生产', '/products', <AlignCenterOutlined />),
    getItem('产品贴码', '/qrcodes', <AlignCenterOutlined />),
    getItem('维修溯源', '/overhaul', <AlignCenterOutlined />),

  ];
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const menuClick = (e) => {
    props.history.push(e.key)
    setPathUrl(e.key)
  }
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}

    >
      <Sider style={{ backgroundColor: "black", }}>
        <div className="demo-logo-vertical sideTitle" >
          <span>物联管理平台</span>
        </div>
        <Menu theme="dark" selectedKeys={pathUrl} mode="inline" items={items} onClick={(e) => menuClick(e)} style={{ backgroundColor: "black", fontSize: "12px", }} />
      </Sider>
      <Layout style={{ background: "#f5f4f4" }}>

        <Content style={{ position: 'relative' }}>
          <div
            style={{
              // padding: "0 0 20px 0",
              // background: colorBgContainer,
              borderRadius: "5px",
              // height: document.documentElement.clientHeight - 140,
              margin: '15px 15px 0 15px',
            }}
          >
            <NewRouter />
          </div>
        </Content>

      </Layout>
    </Layout >
  )
}
export default withRouter(NewsSandBox)